<template>
  <div class="w-full">
    <div class="w-96 center title">基本信息</div>

    <!-- 编辑状态 -->
    <div class="normal-detail">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        size="default"
        status-icon
      >
        <el-form-item label="头像" prop="avatar">
          <el-upload
            :auto-upload="false"
            :show-file-list="false"
            @change="fileOnChange"
          >
            <el-avatar
              class="avatar"
              :src="'http://localhost:8181' + form.avatar"
            ></el-avatar>
          </el-upload>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <span>{{ form.username }}</span>
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="地址" prop="location">
          <el-input v-model="form.location" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex" class="ml-4">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
          <el-input type="textarea" v-model="form.introduction" />
        </el-form-item>
        <el-form-item>
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit(formRef)">修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { Plus } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import request from "@/axios/http";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const form = ref(JSON.parse(sessionStorage.getItem("user")));
const formRef = ref(null);
const rules = ref({
  username: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
  email: [
    {
      type: "email",
      message: "请输入邮箱格式",
      trigger: ["blur"],
    },
  ],
});
const onSubmit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      request({
        url: "user/edituser",
        method: "post",
        data: form.value,
      }).then((res) => {
        if (res.code == 200) {
          ElMessage.success("编辑成功！");
          sessionStorage.setItem("user", JSON.stringify(form.value));
        } else {
          ElMessage.error("编辑失败");
        }
      });
    }
  });
};
const fileOnChange = (data) => {
  let FormFile = new FormData();
  FormFile.append("file", data.raw);
  FormFile.append("id", form.value.id);
  request({
    url: "user/updateAvator",
    method: "post",
    isFile: true,
    data: FormFile,
  }).then((res) => {
    if (res.code == 200) {
      form.value.avatar = res.data;

      ElMessage.success("修改成功！");
    } else {
      ElMessage.error("修改失败！");
    }
  });
};
</script>
<style scoped lang="less">
.container {
  margin: 0;
  padding: 0;
  display: block;
}

.container .title {
  font-size: larger;
  font-family: "loli", sans-serif;
}
</style>
<style scoped lang="less"></style>
